<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <title>index</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../src/frame/bootstrap-3.0.0/css/metro-bootstrap.min.css">
    <link rel="stylesheet" href="../src/css/minion-global.css">
    <style type="text/css">
    img {
        width: 100%;
    }
    
    body {
        background-color: #EEEEEE;
    }

    .col-xs-6 {
        width: 49%;
    }

    .navbar {
        z-index:10;
    }
    
    .row div {
        padding: 3px;
    }
    .loading {
        text-align: center;
        margin: 20px 0px;
    }

    #wrapper {
        position:absolute; z-index:1;
        top:50px; bottom:0px; left:-9999px;
        width:100%;
        overflow:auto;
    }

    #scroller {
        position:absolute; 
        z-index:1;
    /*  -webkit-touch-callout:none;*/
        -webkit-tap-highlight-color:rgba(0,0,0,0);
        width:100%;
        padding:0;
    }
    /**
     *
     * Pull down styles
     *
     */
    #pullDown, #pullUp {
        background:#fff;
        height:40px;
        line-height:40px;
        padding:5px 10px;
        font-weight:bold;
        font-size:14px;
        color:#888;
        margin: 0px;
        text-align: center;
    }
    #pullDown .pullDownIcon, #pullUp .pullUpIcon  {
        display:block; float:left;
        width:40px; height:40px;
        background:url('../src/img/pull-icon@2x.png') 0 0 no-repeat;
        -webkit-background-size:40px 80px; background-size:40px 80px;
        -webkit-transition-property:-webkit-transform;
        -webkit-transition-duration:250ms;  
    }
    #pullDown .pullDownIcon {
        -webkit-transform:rotate(0deg) translateZ(0);
    }
    #pullUp .pullUpIcon  {
        -webkit-transform:rotate(-180deg) translateZ(0);
    }

    #pullDown.flip .pullDownIcon {
        -webkit-transform:rotate(-180deg) translateZ(0);
    }

    #pullUp.flip .pullUpIcon {
        -webkit-transform:rotate(0deg) translateZ(0);
    }

    #pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon {
        background-position:0 100%;
        -webkit-transform:rotate(0deg) translateZ(0);
        -webkit-transition-duration:0ms;

        -webkit-animation-name:loading;
        -webkit-animation-duration:2s;
        -webkit-animation-iteration-count:infinite;
        -webkit-animation-timing-function:linear;
    }

    @-webkit-keyframes loading {
        from { -webkit-transform:rotate(0deg) translateZ(0); }
        to { -webkit-transform:rotate(360deg) translateZ(0); }
    }
    </style>

</head>

<body class="minion">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">豆饼表情</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">逗比</a></li>
                    <li><a href="#">萌萌哒</a></li>
                </ul>
            </div>
        </div>
    </nav>

<div id="wrapper">
    <div id="scroller">
        <div id="pullDown">
            <span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span>
        </div>

        <div class="row">
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/1.jpg" />
            </div>
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/2.gif" />
            </div>
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/3.gif" />
            </div>
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/4.gif" />
            </div>
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/5.gif" />
            </div>
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/6.jpg" />
            </div>
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/7.gif" />
            </div>
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/5.gif" />
            </div>
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/8.gif" />
            </div>
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/9.png" />
            </div>
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/2.gif" />
            </div>
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/9.png" />
            </div>
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/4.gif" />
            </div>
            <div class="col-xs-6 col-md-2 grid-item">
                <img src="../src/img/face/8.gif" />
            </div>
        </div>
        <div id="pullUp">
            <span class="pullUpIcon"></span><span class="pullUpLabel">上滑加载更多...</span>
        </div>
    </div>
</div>

    <script src="../src/frame/jquery-1.9.1.js"></script>
    <script src="../src/frame/angular-1.3.0.14/angular.min.js"></script>
    <script src="../src/frame/angular-ui-router.js"></script>
    <script src="../src/frame/bootstrap-3.0.0/js/bootstrap.min.js"></script>
    <script src="../src/frame/jquery.masonry.min.js"></script>
    <script src="../src/frame/iscroll4.js"></script>

    <script src="../src/dist/js/minion.js"></script>

<script type="text/javascript">

var container = $('.row');
container.imagesLoaded(function() {
    container.masonry({
        itemSelector: '.grid-item',
        isAnimatedBooleanfalse: true,
        isFitWidthBooleanfalse: true,
        isResizableBooleantrue: true
    });
});

var myScroll,
    pullDownEl, pullDownOffset,
    pullUpEl, pullUpOffset,
    generatedCount = 0;

function pullDownAction () {
    setTimeout(function () {    // <-- Simulate network congestion, remove setTimeout from production!
        console.log('pull down action');
        
        myScroll.refresh();     // Remember to refresh when contents are loaded (ie: on ajax completion)
    }, 1000);   // <-- Simulate network congestion, remove setTimeout from production!
}

function pullUpAction () {
    console.log('pull up action');
    var ele = '<div class="col-xs-6 col-md-2 grid-item">'
                + '<img src="../src/img/face/test.png" />'
            + '</div>';
    var ele_append = $(ele + ele + ele);
    container.append(ele_append).masonry('appended', ele_append, false); 
    
    myScroll.refresh();     // Remember to refresh when contents are loaded (ie: on ajax completion)
}

function loaded() {
    pullDownEl = document.getElementById('pullDown');
    pullDownOffset = pullDownEl.offsetHeight;
    pullUpEl = document.getElementById('pullUp');   
    pullUpOffset = pullUpEl.offsetHeight;
    
    myScroll = new iScroll('wrapper', {
        useTransition: true,
        topOffset: pullDownOffset,
        hideScrollbar: false,
        onRefresh: function () {
            if (pullDownEl.className.match('loading')) {
                pullDownEl.className = '';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
            } else if (pullUpEl.className.match('loading')) {
                pullUpEl.className = '';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = '上滑加载更多...';
            }
        },
        onScrollMove: function () {
            if (this.y > 5 && !pullDownEl.className.match('flip')) {
                pullDownEl.className = 'flip';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = '释放刷新...';
                this.minScrollY = 0;
            } else if (this.y < 5 && pullDownEl.className.match('flip')) {
                pullDownEl.className = '';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
                this.minScrollY = -pullDownOffset;
            } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
                pullUpEl.className = 'flip';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = '释放刷新...';
                this.maxScrollY = this.maxScrollY;
            } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
                pullUpEl.className = '';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = '上滑加载更多...';
                this.maxScrollY = pullUpOffset;
            }
        },
        onScrollEnd: function () {
            if (pullDownEl.className.match('flip')) {
                pullDownEl.className = 'loading';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';                
                pullDownAction();   // Execute custom function (ajax call?)
            } else if (pullUpEl.className.match('flip')) {
                pullUpEl.className = 'loading';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';                
                pullUpAction(); // Execute custom function (ajax call?)
            }
        }
    });
    
    setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
}

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
</script>

</body>

</html>
